<template>
	<view class="container">
		<uwo-nav-bar bgColor="#2979ff">
			<template #content>表单预览</template>
		</uwo-nav-bar>
		<!-- 如果只有一组内容就去掉uni-section -->
		<uni-section title="表单预览" type="line">
			<view class="uni-px-8">
				<uni-forms :border="true" ref="myForm" :label-width="75">
					<uni-forms-item label="姓名:">
						<view class="text-view">{{ formData.name }}</view>
					</uni-forms-item>
					<uni-forms-item label="文件上传:">
						<uwo-upload v-model="formData.appendix" :disabled="true"></uwo-upload>
					</uni-forms-item>
					<uni-forms-item label="年龄:">
						<view class="text-view">{{ formData.age }}</view>
					</uni-forms-item>
					<uni-forms-item label="性别:">
						<view class="text-view">{{ sexStr(formData.sex) }}</view>
					</uni-forms-item>
					<uni-forms-item label="兴趣爱好:">
						<view class="text-view">{{ formData.hobby.join(',') }}</view>
					</uni-forms-item>
					<uni-forms-item label="自我介绍:">
						<view class="text-view">{{ formData.introduction }}</view>
					</uni-forms-item>
				</uni-forms>
			</view>
		</uni-section>
		<uni-section title="表单预览" class="uni-mt-8" type="line">
			<view class="uni-px-8">
				<uni-forms :border="true" ref="myForm" :label-width="75">
					<uni-forms-item label="姓名:">
						<view class="text-view">{{ formData.name }}</view>
					</uni-forms-item>
					<uni-forms-item label="文件上传:">
						<uwo-upload v-model="formData.appendix" :disabled="true"></uwo-upload>
					</uni-forms-item>
					<uni-forms-item label="年龄:">
						<view class="text-view">{{ formData.age }}</view>
					</uni-forms-item>
					<uni-forms-item label="性别:">
						<view class="text-view">{{ sexStr(formData.sex) }}</view>
					</uni-forms-item>
					<uni-forms-item label="兴趣爱好:">
						<view class="text-view">{{ formData.hobby.join(',') }}</view>
					</uni-forms-item>
					<uni-forms-item label="自我介绍:">
						<view class="text-view">{{ formData.introduction }}</view>
					</uni-forms-item>
				</uni-forms>
			</view>
		</uni-section>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { getEnv } from '@/common/config.js';
import { sexStr } from '@/common/js/sysDict.js';
// 基础表单数据
const formData = ref({
	name: '名称',
	appendix: [{ path: getEnv().API_URL_STATIC + '/dev/20230913/991063becfde4e299a41f48fd332157e.jpeg', url: null, name: '1694569144725.jpeg', suffix: 'jpeg', size: 197117 }],
	age: '18',
	introduction: '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈',
	sex: '2',
	hobby: ['唱歌', '跳舞']
});
</script>

<style lang="scss" scoped>
.container {
}
</style>
